<template>
  <div class="">
      <div class="qiye" v-if="(saveRoleName == '市级管理员')&&(saveRoleName == '区县管理员')">
          <div class="intro">
              <div class="title">项目分布概况</div>
              <div class="ben">本年</div>
          </div>
          <div class="danwei">数量(个)</div>
          <div v-if="saveRoleName == '市级管理员'" ref="pieChartX" style="width: 36rem; height: 30rem;margin: 0 auto;"></div>
          <div v-if="saveRoleName == '区县管理员'" ref="pieChartY" style="width: 36rem; height: 30rem;margin: 0 auto;"></div>
      </div>
      <div class="hangye" v-if="chartsxmqstimeList.length">
          <div class="intro">
              <div class="title">项目趋势概况</div>
          </div>
          <div class="pie-box">
            <div ref="pieChart3" style="width: 32rem; height: 30rem;margin: 0 auto;"></div>
          </div>
      </div>
      <div class="hangye" v-if="chartsProjectRl.length">
          <div class="intro">
              <div class="title">项目投资方向</div>
          </div>
          <div class="pie-box">
            <div ref="pieChart2" style="width: 30rem; height: 18rem;"></div>
          </div>
          <div class="chartsdv">
            <div class="chart-shuju" v-for="(item, index) of chartsProjectRl" :key="index">
              <div class="titlecr" :style="{background: item.color}"></div>
              <div class="titlep1">{{item.title}}</div>
              <div class="titlep">{{item.percent*100}}%</div>
              <div class="titlep">{{item.value}}</div>
            </div>
          </div>
      </div>
  </div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import { getProjectfbgk,getProjectfbqs,getProjectInvestment } from '@/api/company';
import * as echarts from 'echarts';

const saveRoleName = ref('')
saveRoleName.value = localStorage.getItem('myRoleName')
console.log('项目role:',saveRoleName.value);
if(saveRoleName.value == '市级管理员'){
  setTimeout(()=>{
    chartPieCanvasX()
  },1000)
}else if(saveRoleName.value == '区县管理员'){
  setTimeout(()=>{
    chartPieCanvasY()
  },1000)
}


  const pieChartX = ref(null);
  var chartsDataList = []
  var chartsAddressList = []
  async function getProjectDetail() {
    const { code, data } = await getProjectfbgk();
    if(code === 200) {
      data.forEach(item=>{chartsDataList.push(item.value)})
      data.forEach(item=>{chartsAddressList.push(item.title)})
      console.log('chartsDataList:',chartsDataList);
      console.log('chartsAddressList:',chartsAddressList);
    }
  }
  const chartPieCanvasX = ()=>{
    const chartInstance = echarts.init(pieChartX.value);
   const option = {
    xAxis: {
      data: ['海陵区','高港区', '姜堰区', '兴化区', '靖江区', '泰兴区'],
      axisLabel: {
        fontSize: 10
      }
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        data: chartsDataList,
        barWidth: '30%',
        color: '#34A8FE'
      }
    ]
  };
    chartInstance.setOption(option);
  }

  const pieChartY = ref(null);
  const chartPieCanvasY = ()=>{
  const chartInstance = echarts.init(pieChartY.value);
  // const option = {
  //   yAxis: {
  //     type: 'category',
  //     axisLine:{
  //       show:false
  //     },
  //     axisTick:{
  //       show:false
  //     },
  //     axisLabel:{
  //       show:false,
  //     },
  //     data: chartsAddressList,
  //     axisLabel: {
  //       fontSize: 7
  //     }
  //   },
  //   xAxis: {
  //     max: 'dataMax'
  //   },
  //   series: [
  //     {
  //       type: 'bar',
  //       barGap: 0,
  //       data: chartsDataList,
  //       barWidth: 40,
  //       color: '#34A8FE',
  //       label: {
  //         show: true,
  //         fontSize:18,
  //         position: [10, 10],
  //         formatter: '{b}',
  //       },
  //     }
  //   ]
  // };

const option = {
  xAxis: {
    max: 'dataMax'
  },
  yAxis: {
    type: 'category',
    axisLine:{
      show:false
    },
    axisTick:{
      show:false
    },
    axisLabel:{
      show:false,
    },
    data: chartsAddressList
  },
  series: [
    {
      type: 'bar',
      barGap: 0,
      data: chartsDataList,
      barWidth:40,
      label: {
        show: true,
        fontSize:12,
        position: [10, 10],
        formatter: '{b}',
      },

    },
    {
      type: 'bar',
      data: chartsDataList,
      barWidth:20,
      label: {
        show: true,
        position: 'right',
      },

    }
  ],

};
    chartInstance.setOption(option);
  }




var chartsxmqstimeList = []
var chartscountsList = []
var sliceArr1 = []
var sliceArr2 = []
async function getProjectfbqsDetail() {
  const { code, data } = await getProjectfbqs();
  if(code === 200) {
    data.forEach(item=>{chartsxmqstimeList.push(item.title)})
    data.forEach(item=>{chartscountsList.push(item.value)})
    sliceArr1 = chartsxmqstimeList.filter((_, index) => index % 2 === 1).map(item => item.substring(item.length-3,item.length));
    sliceArr2 = chartscountsList.filter((_, index) => index % 2 === 1);
    console.log('sliceArr2:',sliceArr2);
    console.log('sliceArr1:',sliceArr1);
  }
}

const pieChart3 = ref(null);
const chartPieCanvas3 = ()=>{
  const chartInstance3 = echarts.init(pieChart3.value);
  const option3 = {
    xAxis: {
      data: sliceArr1,
      axisLabel: {
          fontSize: 12
      }
  },
  yAxis: {},
  series: [
    {
      data: sliceArr2,
      type: 'line',
      lineStyle: {
        normal: {
          color: '#34A8FE',
          width: 1,
          type: ''
        }
      },
      areaStyle: {
        color: '#34A8FE',
        opacity: 0.5
      }
    },
  ]
  };
  chartInstance3.setOption(option3);
}

const projectDataList = []
const chartsProjectRl = ref([])
const rctotal = ref('')
async function getProjectInvestDetail() {
  const { code, data } = await getProjectInvestment();
  if(code === 200) {
    chartsProjectRl.value = data.dataList
    chartsProjectRl.value[0].color = "#3BA0FF";
    rctotal.value = data.total
    if(chartsProjectRl.value[1]){
      chartsProjectRl.value[1].color = "#36CBCB";
    }
    if(chartsProjectRl.value[2]){
      chartsProjectRl.value[2].color = "#4DCB73";
    }
    if(chartsProjectRl.value[3]){
      chartsProjectRl.value[3].color = "#FAD337";
    }
    if(chartsProjectRl.value[4]){
      chartsProjectRl.value[4].color = "#8543E0";
    }
    console.log('chartsProjectRl.value:',chartsProjectRl.value);
    data.dataList.forEach(item=>{
      projectDataList.push({
        name: item.title,
        value: item.value
      })
    })
    console.log('projectDataList:',projectDataList);
  }
}

const pieChart2 = ref(null);
const chartPieCanvas2 = ()=>{
  const chartInstance2 = echarts.init(pieChart2.value);
  const option2 = {
    title: {
      text: "总项目数\n\n" + rctotal.value,
      left: 'center',
      top: 'center',
      textStyle: {
        fontSize: 14 // 修改字体大小
      }
    },
    series: [
      {
        type: 'pie',
        color: [
          '#3BA0FF',
          '#36CBCB',
          '#4DCB73',
          '#FAD337'
        ],
        data: projectDataList,
        radius: ['60%', '90%'],
        label:{
          show: false
        }
      }
    ]
  };
  chartInstance2.setOption(option2);
}
 
onMounted(() => {
  getProjectDetail()
  getProjectfbqsDetail()
  getProjectInvestDetail()
  setTimeout(()=>{
      chartPieCanvas2()
      chartPieCanvas3()
    },1000)
});
</script>

<style lang="scss" scoped>
.intro{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ben{
  width: 7.6rem;
  height: 2.8rem;
  line-height: 2.8rem;
  border-radius: 4px;
  background: #FFFFFF;
  border: 1px solid #D2DCE7;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 400;
}
.qiye,.hangye{
  background: #fff;
  padding: 1rem;
}
.qiye{
  margin-bottom: 2rem;
}
.title{
  font-size: 1.8rem;
  font-weight: 700;
}
.danwei{
  font-size: 1.2rem;
  font-weight: 400;
  color: #B0B0B0;
  position: relative;
  top: 3.5rem;
  left: 0.5rem;
}
.pie-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.chartsdv{
  width: 100%;

.chart-shuju{
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

  .titlecr{
    width: 0.8rem;
    height: 0.8rem;
    margin-bottom: 1.6rem;
    border-radius: 50%;

  }
  .titlep1{
    font-size: 1.3rem;
    font-weight: 400;
    color: #D1D1D1;
    text-align: center;
    margin-bottom: 1.6rem;
    margin-left: 0.4rem;
    width: 21rem;
    text-align: left;
  }
  .titlep{
    font-size: 1.3rem;
    font-weight: 700;
    color: #6D6D6D;
    text-align: center;
    margin-bottom: 1.6rem;
    width: 4.5rem;
    text-align: center;
  }
  .titlep2{
    font-size: 1.3rem;
    font-weight: 700;
    color: #333333;
    text-align: center;
    width: 5rem;
    text-align: center;
  }
}
}
</style>